iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 21

Day20:狀態參數判讀

  • 分享至 

  • xImage
  •  

在 WebSocket 中,對於是否處於連線狀態,或是連線有無成功,預設有提供參數供開發者判斷,因此可以透過 readState 來檢查。

readyState

首先查看 WebSocket.readyState 文件,可以看到 1 是保持連線狀態,3 則是關閉連線。

所以接下來透過實作來查看狀態的變化。

// main.js

ws.onopen = function () {
  // send to server-side
  console.log(`open : ${ws.readyState}`);
};
ws.onmessage = function (event) {
  console.log(`message : ${ws.readyState}`);
  console.log(event);
};
// 當連結關閉時,主動觸發 close event
ws.onclose = function (event) {
  console.log(`close : ${ws.readyState}`);
};

terminal 運行 server-side 的 index.js,可以看到 client-side 印出來的狀態。

同樣的,如果 terminal 關閉 server-side,那頁面則會印出 3,表示 ws 連線已關閉。

Close Event

除了關閉 server 來觸發 close 事件外,也可以從 client-side 來關閉 ws 連線。

<button type="button" id="btn">Disconnect</button>
// main.js

const closeBtn = document.getElementById('btn');
closeBtn.addEventListener('click', () => {
  ws.close();
});

Error Event

另一種情境,則是 server-side 出現連線問題,導致 client-side 試圖連線卻失敗,這時候就會觸發 error 事件。

// main.js
ws.onerror = function () {
  console.log(`error : ${ws.readyState}`);
};

關閉運行的 server-side,並重新刷新 HTML 頁面,這時候,client-side 會因為無法連線 server 導致 fail,進而觸發 error event。


上一篇
Day19:WS 基本 API
下一篇
Day21:使用 ws 實作訊息傳遞
系列文
摸索 WebSocket,遠望 WebRTC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言